<!--
 * @Author: wangchaoxu
 * @Date: 2020-05-08 18:36:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-11 21:39:27
 * @Description: 
 -->
<template>
  <div class="container">
    <div class="header-con">
      <div class="left-con inline">
        <div class="top-con">
          <span class="tem title">13℃</span>
          <span class="wind title teal">西南风X-X级</span>
          <span class="date title teal">2020/XX/XX</span>
          <span class="week title teal">星期X</span>
          <span class="time title teal">10:35</span>
        </div>
        <div class="bottom-con">
          <span class="title ellipsis">
            以往此天氣下高三X職業班請假學生 早上自動發短信提醒學生啟動
          </span>
        </div>
      </div>
      <div class="center-con inline">
        <span class="title">職業教育量化機制 高三X職業班</span>
      </div>
      <div class="right-con inline">
        <div class="item-con inline">
          <p class="top">
            <span class="title">思想管理 </span>
            <span class="title pink">6號</span>
          </p>
          <p class="bottom">
            <span class="title">
              本段未達標學生
            </span>
          </p>
        </div>
        <div class="item-con inline">
          <p class="top">
            <span class="title">管理量化 </span>
            <span class="title pink">6號</span>
          </p>
          <p class="bottom">
            <span class="title">
              本段未達標學生
            </span>
          </p>
        </div>
        <div class="item-con inline">
          <p class="top">
            <span class="title">學習量化 </span>
            <span class="title pink">6號</span>
          </p>
          <p class="bottom">
            <span class="title">
              本段未達標學生
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="content-con">
      <div class="main-con">
        <div class="left-con">
          <div class="container1">
            <i class="icon-con"></i>
            <span class="title">班級思想量化曲線圖</span>
            <div id="think-line" class="chart-con"></div>
          </div>
          <div class="container1">
            <i class="icon-con"></i>
            <span class="title">班級管理量化曲線圖</span>
            <div id="manage-line" class="chart-con"></div>
          </div>
          <div class="container1">
            <i class="icon-con"></i>
            <span class="title title1">今日男生表現</span>
            <i class="icon-con icon-con2"></i>
            <span class="title title2">今日女生表現</span>
            <div class="charts-con">
              <div class="chart">
                <div id="chart1" class="min-chart"></div>
              </div>
              <div class="chart">
                <div id="chart2" class="min-chart">
                  <div class="top">
                    <img src="../../assets/images/zhengchang.png" alt="" />
                    <p class="zhengchang">正常</p>
                  </div>
                  <div class="bottom">
                    <img src="../../assets/images/yichang.png" alt="" />
                    <p class="yichang">异常</p>
                  </div>
                </div>
              </div>
              <div class="chart">
                <div id="chart3" class="min-chart"></div>
              </div>
              <div class="chart">
                <div id="chart4" class="min-chart"></div>
                <span class="title Cyan">遲到</span>
              </div>
              <div class="chart">
                <div id="chart5" class="min-chart"></div>
                <span class="title Cyan">生病</span>
              </div>
              <div class="chart">
                <div id="chart6" class="min-chart"></div>
                <span class="title Cyan">曠課</span>
              </div>
            </div>
          </div>
        </div>
        <div class="center-con">
          <div class="top-con">
            <div class="container1">
              <p class="title Cyan">XX</p>
              <p class="detail">今日請假人數</p>
            </div>
            <div class="container1">
              <p class="title Cyan">XX</p>
              <p class="detail">今日遲到人數</p>
            </div>
            <div class="container1">
              <p class="title pink">XX</p>
              <p class="detail">課堂異常情況</p>
            </div>
          </div>
          <div class="bottom-con">
            <div class="title-con">
              <i class="icon-con"></i>
              <span class="title">紧急视频（紧急情况启动）</span>
              <span class="count">0</span>
              <span class="count">2</span>
              <span class="count">0</span>
              <span class="title">人</span>
            </div>
            <div class="real-con"></div>
            <div class="manage-con">
              <div class="container1">
                <div class="center">
                  <p class="title">周一量化管理</p>
                  <p class="red">思想量化问题</p>
                  <p class="Cyan">管理量化问题</p>
                  <p class="yellow">学习量化问题</p>
                </div>
              </div>
              <div class="container1">
                <div class="center">
                  <p class="title">周一量化管理</p>
                  <p class="red">思想量化问题</p>
                  <p class="Cyan">管理量化问题</p>
                  <p class="yellow">学习量化问题</p>
                </div>
              </div>
              <div class="container1">
                <div class="center">
                  <p class="title">周一量化管理</p>
                  <p class="red">思想量化问题</p>
                  <p class="Cyan">管理量化问题</p>
                  <p class="yellow">学习量化问题</p>
                </div>
              </div>
              <div class="container1">
                <div class="center">
                  <p class="title">周一量化管理</p>
                  <p class="red">思想量化问题</p>
                  <p class="Cyan">管理量化问题</p>
                  <p class="yellow">学习量化问题</p>
                </div>
              </div>
              <div class="container1">
                <div class="center">
                  <p class="title">周一量化管理</p>
                  <p class="red">思想量化问题</p>
                  <p class="Cyan">管理量化问题</p>
                  <p class="yellow">学习量化问题</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-con">
          <div class="container1 birthday">
            <i class="icon-con"></i>
            <span class="title ellipsis">本月學生生日及重要事件</span>
            <p class="p1 ellipsis">11號</p>
            <p class="p2 ellipsis">生日</p>
            <p class="p3 ellipsis">5.6.7號</p>
            <p class="p4 ellipsis">參與比賽同學</p>
          </div>
          <div class="container1 activity">
            <i class="icon-con"></i>
            <span class="title ellipsis">今日班級值日生，及本月班級活動</span>
            <p class="p1 ellipsis">4.5號</p>
            <p class="p2 ellipsis">值日生</p>
            <p class="p3 ellipsis">30號</p>
            <p class="p4 ellipsis">黑沙燒烤</p>
          </div>
          <div class="container1 quan">
            <i class="icon-con"></i>
            <span class="title">每天量化綜合分數</span>
            <i class="icon-pre"></i>
            <i class="icon-next"></i>

            <div class="bottom-con">
              <div id="day-bar" class="chart-con"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts-liquidfill';
export default {
  data() {
    return {
      in: require('@/assets/images/in.png'),
      out: require('@/assets/images/out.png'),
    };
  },
  methods: {
    resetSize(val, initWidth = 1920) {
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      return val * (nowClientWidth / initWidth);
    },
    drawManage() {
      var myChart = echarts.init(document.getElementById('manage-line'));
      var yData = ['新手小白', '小徒弟', '小教師', '小工人', '小匠人', '教師', '聖鬥士'];
      var option = {
        legend: {
          height: '13px',
          data: [
            {
              name: ' 进 ',
              icon: 'image://' + this.in,
            },
            {
              name: ' 出 ',
              icon: 'image://' + this.out,
            },
          ],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)',
          },
          right: '4%',
          top: '3%',
        },
        tooltip: { trigger: 'axis' },
        grid: {
          top: '20%',
          left: '0%',
          right: '29px',
          bottom: '5%',
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false, //两侧留白
            show: false,
            axisLine: { lineStyle: { color: 'rgba(204,187,225,0.5)' } },
            splitLine: { show: false },
            axisTick: { show: false },
            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日'],
          },
        ],
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (value, i) => {
              return yData[i];
            },
            textStyle: {
              color: '#ddd',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(255,255,255,0.1)',
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: ' 进 ',
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              color: '#99eff4',
              width: 2,
              type: 'dashed', //'dotted'虚线 'solid'实线
            },
            data: [0, 3.1, 0, 0.8, 4.1, 6, 3, 0.8],
          },
          {
            name: ' 出 ',
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              color: '#b37a99',
              width: 2,
              type: 'dashed', //'dotted'虚线 'solid'实线
            },
            data: [0.3, 1.2, 4.2, 0.3, 0, 4.5, 4.9, 1],
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawThinkLine() {
      var myChart = echarts.init(document.getElementById('think-line'));
      var yData = ['新手小白', '小徒弟', '小教師', '小工人', '小匠人', '教師', '聖鬥士'];
      var option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: { trigger: 'axis' },
        legend: {
          height: '13px',
          data: [
            {
              name: '女生',
              icon: 'image://' + this.in,
            },
            {
              name: '男生',
              icon: 'image://' + this.out,
            },
          ],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)',
          },
          right: '4%',
          top: '3%',
        },
        grid: {
          top: '20%',
          left: '0%',
          right: '29px',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          zlevel: 0,
          type: 'category',
          boundaryGap: false, //两侧留白
          data: ['一季度', ' ', '二季度', ' ', '三季度', ' ', '四季度'],
          axisLabel: {
            textStyle: { color: '#ddd' },
            align: 'center',
            verticalAlign: 'center',
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (value, i) => {
              return yData[i];
            },
            textStyle: {
              color: '#ddd',
            },
          },
          // nameLocation: 'center',
          splitLine: {
            lineStyle: {
              color: 'rgb(255,255,255,0.1)',
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '男生',
            type: 'line',
            color: 'rgba(85,137,210)',
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    { offset: 0, color: 'rgba(85,137,210, 0.5)' },
                    { offset: 0.8, color: 'rgba(85,137,210, 0.1)' },
                  ],
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
              },
            },
            symbol: 'circle',
            symbolSize: 5,
            data: [2.5, 5.5, 2.5, 5.5, 2.5, 5.5, 2, 2.9],
          },
          {
            name: '女生',
            type: 'line',
            color: 'rgba(119,61,190)',
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    { offset: 0, color: 'rgba(119,61,190, 0.5)' },
                    { offset: 0.8, color: 'rgba(119,61,190, 0.1)' },
                  ],
                },
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
              },
            },
            symbol: 'circle',
            symbolSize: 5,
            data: [4, 5.5, 2.5, 6, 4.5, 5, 4.8, 4.8],
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawColumn() {
      var myChart = echarts.init(document.getElementById('day-bar'));
      var option = {
        // backgroundColor: '#0e202d',
        grid: {
          top: '15%',
          left: '10%',
          bottom: '10%',
          right: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['2020年2月1日', '2020年2月2日', '2020年2月3日'],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#ddd',
              },
              margin: 20,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '', //圆柱顶部椭圆
            type: 'pictorialBar',
            symbolSize: [30, 16],
            symbolOffset: [0, -10],
            symbolPosition: 'end',
            z: 12,
            itemStyle: {
              color: '#36e2ff',
            },
            data: [20, 60, 40],
          },
          {
            name: '', //圆柱顶部椭圆2
            type: 'pictorialBar',
            symbolSize: [30, 16],
            symbolOffset: [0, -10],
            symbolPosition: 'end',
            z: 12,
            itemStyle: {
              color: 'rgba(0,89,165,1)',
            },
            data: [90, 90, 90],
          },
          {
            name: '', //圆柱底部椭圆
            type: 'pictorialBar',
            symbolSize: [30, 16],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              color: '#096acc',
            },
            data: [20, 60, 40],
          },
          {
            type: 'bar', //柱状图
            barWidth: '30',
            stack: 'a',
            data: [20, 60, 40],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                  {
                    offset: 0,
                    color: '#0d69ff',
                  },
                  {
                    offset: 1,
                    color: '#16a2ff',
                  },
                ]),
              },
            },
          },
          {
            type: 'bar', //柱状图
            barWidth: '30',
            stack: 'a',
            data: [70, 30, 50],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                  {
                    offset: 0,
                    color: 'rgba(0,89,165,.8)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,89,165,.0)',
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawChart1() {
      var myChart = echarts.init(document.getElementById('chart1'));
      var option = {
        grid: {
          top: '20%',
          left: '0%',
          right: '29px',
          bottom: '5%',
          containLabel: true,
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                width: 16,
                height: 46,
                image:
                  '',
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '数据',
            type: 'pie',
            startAngle: 315,
            radius: ['60%', '70%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                length: 5,
                length2: 10,
              },
            },
            data: [
              {
                value: 25,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
              {
                value: 50,
                name: '正常75%',
                label: {
                  normal: {
                    textStyle: {
                      color: '#1da1d5',
                      // fontSize: 16,
                    },
                  },
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#19b1dc',
                    },
                    {
                      offset: 1,
                      color: '#2771c2',
                    },
                  ]),
                },
              },
              {
                value: 25,
                name: '异常25%',
                itemStyle: {
                  color: '#262795',
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawChart2() {
      var myChart = echarts.init(document.getElementById('chart3'));
      var option = {
        grid: {
          top: '20%',
          left: '0%',
          right: '29px',
          bottom: '5%',
          containLabel: true,
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                width: 16,
                height: 46,
                image:
                  '',
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '数据',
            type: 'pie',
            startAngle: 315,
            radius: ['60%', '70%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                length: 5,
                length2: 10,
              },
            },
            data: [
              {
                value: 25,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
              {
                value: 50,
                name: '正常75%',
                label: {
                  normal: {
                    textStyle: {
                      color: '#1da1d5',
                      // fontSize: 16,
                    },
                  },
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#19b1dc',
                    },
                    {
                      offset: 1,
                      color: '#2771c2',
                    },
                  ]),
                },
              },
              {
                value: 25,
                name: '异常25%',
                itemStyle: {
                  color: '#262795',
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawChart4() {
      var myChart = echarts.init(document.getElementById('chart4'));
      let option = {
        title: [
          {
            text: '20%',
            left: '45%',
            top: '25%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: 'rgba(168, 89, 255, 1)',
              fontSize: 15,
              textAlign: 'center',
            },
          },
        ],
        series: [
          {
            type: 'liquidFill',
            data: [4 / 12],
            direction: 'right', //波浪方向或者静止
            radius: '80%',
            // 水球颜色
            color: ['rgba(168, 89, 255, .5)'],
            center: ['50%', '50%'], //水球位置
            // outline  外边
            outline: {
              show: false,
              borderDistance: 2, //内环padding值
              itemStyle: {
                borderWidth: 1, //圆边线宽度
                borderColor: 'rgba(168, 89, 255, 1)',
                type: 'dashed', //'dotted'虚线 'solid'实线
              },
            },
            label: {
              normal: {
                formatter: '', //重置百分比字体为空
                color: 'red',
                insideColor: 'yellow',
                fontSize: 10,
              },
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 1,
              borderColor: 'rgba(168, 89, 255, 1)',
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawChart5() {
      var myChart = echarts.init(document.getElementById('chart5'));
      let option = {
        title: [
          {
            text: '20%',
            left: '45%',
            top: '25%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: 'rgba(231,139,67, 1)',
              fontSize: 15,
              textAlign: 'center',
            },
          },
        ],
        series: [
          {
            type: 'liquidFill',
            data: [4 / 12],
            direction: 'right', //波浪方向或者静止
            radius: '80%',
            // 水球颜色
            color: ['rgba(231,139,67, .5)'],
            center: ['50%', '50%'], //水球位置
            // outline  外边
            outline: {
              show: false,
              borderDistance: 2, //内环padding值
              itemStyle: {
                borderWidth: 1, //圆边线宽度
                borderColor: 'rgba(231,139,67, 1)',
                type: 'dashed', //'dotted'虚线 'solid'实线
              },
            },
            label: {
              normal: {
                formatter: '', //重置百分比字体为空
                color: 'red',
                insideColor: 'yellow',
                fontSize: 10,
              },
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 1,
              borderColor: 'rgba(231,139,67, 1)',
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    drawChart6() {
      var myChart = echarts.init(document.getElementById('chart6'));
      let option = {
        title: [
          {
            text: '20%',
            left: '45%',
            top: '25%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: 'rgba(52,171,255, 1)',
              fontSize: 15,
              textAlign: 'center',
            },
          },
        ],
        series: [
          {
            type: 'liquidFill',
            data: [4 / 12],
            direction: 'right', //波浪方向或者静止
            radius: '80%',
            // 水球颜色
            color: ['rgba(52,171,255, .5)'],
            center: ['45%', '50%'], //水球位置
            // outline  外边
            outline: {
              show: false,
              borderDistance: 2, //内环padding值
              itemStyle: {
                borderWidth: 1, //圆边线宽度
                borderColor: 'rgba(168, 89, 255, 1)',
                type: 'dashed', //'dotted'虚线 'solid'实线
              },
            },
            label: {
              normal: {
                formatter: '', //重置百分比字体为空
                color: 'red',
                insideColor: 'yellow',
                fontSize: 10,
              },
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 1,
              borderColor: 'rgba(52,171,255, 1)',
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.drawManage();
      this.drawThinkLine();
      this.drawColumn();
      this.drawChart1();
      this.drawChart2();
      this.drawChart4();
      this.drawChart5();
      this.drawChart6();
    });
  },
  computed: {},
};
</script>

<style scoped lang="less">
@import url('~@/assets/css/common.less');
.content-con {
  .center-con {
    .top-con {
      .container1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .title {
          .text(86px, 51px, 60px, rgba(153, 239, 244, 1));
        }
        .detail {
          .text(160px, 25px, 25px);
          margin-top: 40px;
        }
      }
      .container1:nth-child(3) {
        .title,
        .detail {
          color: #c72c8b;
        }
      }
    }
    .manage-con {
      .container1 {
        display: flex;
        justify-content: center;
        align-items: center;
        .center {
          width: 165px;
          height: 173px;
          p {
            font-size: 26px;
            font-family: SimHei;
            font-weight: 400;
          }
          .red {
            margin-top: 47px;
          }
          .red,
          .Cyan,
          .yellow {
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>
